<template>
  <div class="z-calendar-timeline">
    <el-scrollbar class="z-calendar-timeline__scrollbar">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in rows"
          :key="index"
          :color="globThemeColor"
          hide-timestamp
        >
          <div class="z-calendar-timeline__timestamp">
            {{ activity.day }}
          </div>
          <div class="z-calendar-timeline__content">
            <div
              class="z-calendar-timeline__crad"
              v-for="(item, index) in activity.list"
              :key="index"
              :class="[{ start: item.live_status == 999, end: item.live_status == 992 }]"
              @click="pickLive(item)"
            >
              <div class="time">
                {{ item.start_time | parseTime('{h}:{i}') }}-{{
                  item.end_time | parseTime('{h}:{i}')
                }}
              </div>
              <div class="title">{{ item.course_title }}</div>
              <div class="salutation">{{ item.sec_title }}</div>
              <div class="name">{{ item.teacher_name }}</div>
              <div class="status" v-if="item.live_status == 999 || item.live_status == 992">
                {{ item.live_status == 992 ? '已结束' : '直播中' }}
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </div>
</template>

<script>
import { parseTime } from '@/utils/filters.js'
const validTypes = ['prev', 'today', 'next']
import { mapState, mapGetters } from 'vuex'
import { range } from './date-util'
import Base64 from '@/utils/base64.js'
const getDayHours = (date, amount) => {
  if (amount <= 0) return []
  return range(amount).map((_, index) =>
    new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + index).getTime()
  )
}
const getWeekDataDays = (arr1, arr2) => {
  return arr1.reduce((pre, cur) => {
    const target = pre.find(e => e.date == cur.date)
    if (target) {
      target.list.push(cur)
    }
    return pre
  }, arr2)
}
export default {
  props: {
    value: [Date, String, Number],
    title: String,
    teacher: String
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info,
      token: state => state.user.token
    }),
    ...mapGetters({
      globThemeColor: 'projectSetting/getGlobThemeColor'
    }),
    prevDayDatePrefix() {
      const temp = new Date(
        this.date.getFullYear(),
        this.date.getMonth(),
        this.date.getDate() - 1,
        1
      )
      return parseTime(temp, '{y}-{m}-{d}')
    },
    nextDayDatePrefix() {
      const temp = new Date(
        this.date.getFullYear(),
        this.date.getMonth(),
        this.date.getDate() + 1,
        1
      )
      return parseTime(temp, '{y}-{m}-{d}')
    },
    formatedDate() {
      return parseTime(this.date, '{y}-{m}-{d}')
    },
    formatedToday() {
      return parseTime(this.now, '{y}-{m}-{d}')
    },
    realSelectedDay: {
      get() {
        if (!this.value) return this.selectedDay
        return this.formatedDate
      },
      set(val) {
        this.selectedDay = val
        const date = new Date(val)
        this.$emit('input', date)
      }
    },
    date() {
      if (!this.value) {
        return this.now
      } else {
        return this.toDate(this.value)
      }
    },
    rows() {
      let days = []
      const date = this.date
      date.setHours(0, 0, 0, 0)
      const currentDays = getDayHours(date, 24).map(day => ({
        date: parseTime(day, '{y}-{m}-{d} {h}'),
        day: parseTime(day, '{h}:{i}'),
        list: []
      }))
      days = getWeekDataDays(this.list, currentDays)
      return days
    }
  },
  data() {
    return {
      selectedDay: '',
      now: new Date(),
      list: []
    }
  },
  created() {
    this.getData(this.value)
  },
  methods: {
    getData(date) {
      this.list = []
      this.$api.getCourseScheduleDaily(
        {
          date: parseTime(date, '{y}-{m}-{d}'),
          title: this.title,
          teacher: this.teacher,
          identity: 'student'
        },
        res => {
          const { data } = res
          this.list = data
          this.list.map(item => (item.date = parseTime(item.start_time, '{y}-{m}-{d} {h}')))
          this.$emit('number', this.list.length)
        }
      )
    },
    pickDay(day) {
      this.realSelectedDay = day
      this.getData(day)
    },
    selectDate(type) {
      if (validTypes.indexOf(type) === -1) {
        throw new Error(`invalid type ${type}`)
      }
      let day = ''
      if (type === 'prev') {
        day = `${this.prevDayDatePrefix}`
      } else if (type === 'next') {
        day = `${this.nextDayDatePrefix}`
      } else {
        day = this.formatedToday
      }
      if (day === this.formatedDate) return
      this.pickDay(day)
    },
    onSearch() {
      this.getData(this.value)
    },
    toDate(val) {
      if (!val) {
        throw new Error('invalid val')
      }
      return val instanceof Date ? val : new Date(val)
    },
    pickLive(item) {
      let liveItem = item.sec_live
      let user = this.userInfo
      let token = this.token
      if (item.live_status === 957) {
        this.$message.info('直播未开始')
      } else if (item.live_status === 999) {
        if (this.$util.isEmpty(liveItem)) {
          console.log('live没数据')
          return
        }
        this.$store.commit('course/setCurrentPlayItem', {
          section_live: liveItem
        })
        if (liveItem.live_type === 2) {
          // 大班课
          this.$router.push({
            name: 'cc-big-class'
          })
        } else if (liveItem.live_type === 3) {
          // 小班课
          let params = {
            userid: liveItem.cc_userid,
            roomid: liveItem.cc_room_id,
            password: liveItem.authtype === 0 ? `${token.ak}:${token.sk}` : '',
            username: user.nick_name,
            autoLogin: true,
            role: 'talker',
            template: 32
          }
          const url = `https://class.csslcloud.net/hdclass/#/talker?${this.params(params)}`
          this.$router.push({
            name: 'cc-live',
            query: {
              view: Base64.encode(url)
            }
          })
        }
      } else if (item.live_status === 992) {
        if (this.$util.isEmpty(liveItem)) {
          this.$message.info('直播无回放')
          return
        }
        this.$store.commit('course/setCurrentPlayItem', {
          section_live: liveItem
        })
        if (liveItem.live_type === 2) {
          // 大班课
          if (this.$util.isEmpty(liveItem.cc_replay_id)) {
            this.$message.info('直播无回放')
          } else {
            this.$router.push({
              name: 'cc-replay-big'
            })
          }
        } else if (liveItem.live_type === 3) {
          // 小班课
          if (this.$util.isEmpty(liveItem.cc_replay_url)) {
            this.$message.info('直播无回放')
          } else {
            let params = {
              viewertoken: liveItem.authtype === 0 ? `${token.ak}:${token.sk}` : '',
              viewername: user.nick_name,
              autoLogin: true
            }
            let url = `${liveItem.cc_replay_url}&viewertoken=${params.viewertoken}&viewername=${params.viewername}&autoLogin=${params.autoLogin}`
            this.$router.push({
              name: 'cc-live',
              query: {
                view: Base64.encode(url)
              }
            })
          }
        }
      }
    },
    params(obj) {
      let result = ''
      let item
      for (item in obj) {
        if (obj[item] && String(obj[item])) {
          result += `&${item}=${obj[item]}`
        }
      }
      if (result) {
        result = result.slice(1)
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.z-calendar-timeline {
  &__scrollbar {
    ::v-deep .el-scrollbar__wrap {
      overflow-x: auto;
      max-height: 754px;
    }
  }
  &__timestamp {
    margin-bottom: 8px;
    padding-top: 4px;
    font-size: 16px;
    font-weight: 500;
    color: $text-color-import;
  }
  &__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
  &__crad {
    padding: 20px 10px;
    background: #f6f7fb;
    border-radius: 4px;
    line-height: 1;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 0;
    box-sizing: border-box;
    .time {
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
    }
    .title {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      @include ellipsis;
    }
    .salutation {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
      @include ellipsis;
    }
    .name {
      margin-top: 15px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
      @include ellipsis;
    }
    .status {
      position: absolute;
      right: 0;
      top: 0;
      padding: 3px 2px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      border-radius: 0px 4px 0px 4px;
    }
    &.start {
      .status {
        @include edu-color-primary(background-color);
      }
    }
    &.end {
      .time,
      .title {
        color: $text-color-auxiliary;
      }
      .status {
        background: #b7bac1;
      }
    }
    &:hover {
      background: #f0f1f6;
    }
  }
}
</style>
